
<!--vue中不使用template 渲染页面  使用jsx+ render函数-->
<script>
  export default {
    name: 'JsxFunctionComponent',
    functional: true, // jsx 函数式组件 (无状态组件,没有 this, 没有 data，没有methods)

    props: {
      nodeType: {

      },
      nodeStyleNum: {

      },
      treedata: {

      }
    },
/*
    data(){
      return {
        str:"str"
      }
    },
    methods: {
      divclick() {
        console.log("点我一下")
      }
    }, */

    render (h, context) {
      // 方法声明
      console.log(context.props)

      const itemselect = ({ item, key, selectedKeys }) => {
        console.log(item, key)
      }

      const treeRender = (treeData) => {
       return treeData.map((item) => {
         console.log('item', item)
         if (item.children && item.children.length == 0) {
           return (
             <a-menu-item key={item.key}>
               <a-icon type={'pie-chart'} />
               <span>{item.name}</span>
             </a-menu-item>
           )
         } else {
            return (
              <a-sub-menu key={item.key} title={<span><a-icon type={'pie-chart'}/>{item.name}</span>}>
               {treeRender(item.children)}
              </a-sub-menu>
            )
         }
       })
      }
      const propsdata = context.props.treedata
      const treedata = treeRender(propsdata)
      console.log('zuihoude treedata', treedata)
      // const divclick = ()=>{
      //   console.log("点我一下")
      // }

      // console.log(context.props) // 传过来的东西要么在props 里或者attrs里
      // console.log(context)
      // console.log(nodeType)
      return (
        <div style={{ color: 'red' }}>
        <a-menu
          defaultSelectedKeys={['yijicaidna']}
          defaultOpenkeys={['sanjicaidna2']}
          mode={'inline'}
          theme={'dark'}
          inlineCollapsed={false}
          onClick={itemselect}
          >
            {treedata}
        </a-menu>
        </div>)
    }

  }
</script>

<style scoped>
  .sub-el-icon {
    color: currentColor;
    width: 1em;
    height: 1em;
  }
</style>
